<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
    <!--    引入vue 路由-->
    <script src="../vue/vue-router.js"></script>

    <style>

        #box{
            width: 100%;
            height: 400px;
            border: 2px  solid red;
        }
        #nav{
            width: 100%;
            height: 50px;
            background-color: yellowgreen;
        }
        #nav >h2 ,#nav >p{
            float: left;
            margin-right: 20px;
        }
    </style>
</head>
<body>

<div id="app">
<!--    路由出口  一级路由出口-->
    <router-view></router-view>
</div>

<script>

    // 耳机组件
    let  earphone = {
        template:`
           <h2>耳机详情</h2>
        `
    }

    //  穿戴组件
    let  wearables = {
        template:`
           <h2>穿戴详情</h2>
        `
    }

    // 智能穿戴    父组件
    let smartWearables = {
        template:`
          <div id="box">
            <div id="nav">
              <h2>智能穿戴</h2>
              <p>
                <router-link :to="{name:'earphone'}">耳机</router-link>
              </p>
              <p>
                <router-link :to="{name:'wearables'}">穿戴</router-link>
              </p>
            </div>
            <div id="items">
            <!-- 路由出口  -->
              <router-view></router-view>
            </div>
          </div>
        `
    }

    // 配置路由列表
    let routes = [
        {
            path:'/sw',
            component:smartWearables,
            name:'sw',
            redirect:'/sw/earphone',
            children:[
                {path:'earphone',component:earphone,name:'earphone'},    //    /sw/earphone
                {path:'wearables',component:wearables,name:'wearables'}   //  /sw/wearables
            ]
        }
    ]
    let router = new VueRouter({
        routes
    })

    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        router
      })
</script>

</body>
</html>
